<template>
	<view class="content">
		<view class="cont-top">
			<view class="box uniCenter">
				<view class="title">选择地区</view>
				<input @click="show=true" v-model="address" disabled placeholder-class="pcs" placeholder="请点此选择" type="text">
				<view @click="show2=true" class="btn">户号信息</view>
			</view>
			
			
			
			<view class="box uniCenter">
				<view class="title">充值户号</view>
				<input v-model="usercode" placeholder-class="pcs" placeholder="请输入户号" type="number">
				<view class="btn btn2">获取户号</view>
			</view>
			
			<view class="uniFlex">
				<image src="../../static/img/a1.png" mode=""></image>
				<view>请仔细核对充值账号，充值成功不支持退款！</view>
			</view>
		</view>
		
		<view class="boxes">
			<view class="title">运营商</view>
			<view class="uniFlex">
				<view class="box" :class="{'box2':typeIndex == index}" v-for="(item,index) in typeList" :key="index" @click="tabType(index)">{{item.name}}</view>
			</view>
		</view>
		<view class="boxes">
			<view class="title">电费充值</view>
			<view class="bottomcontent" v-if="typeIndex == 0">
				<view class="boxitem" :class="{'boxitem2':itemIndex === index}" v-for="(item,index) in gw" :key="index" @click="tabItem(index,item.id)">
					<view>立省{{item.sheng}}元</view>
					<view>{{item.m1}}</view>
					<view>￥{{item.m3}}</view>
					<view>原价￥{{item.m1}}</view>
				</view>
			</view>
			<view class="bottomcontent" v-else-if="typeIndex == 1">
				<view class="boxitem" :class="{'boxitem2':itemIndex === index}" v-for="(item,index) in nw" :key="index" @click="tabItem(index,item.id)">
					<view>立省{{item.sheng}}元</view>
					<view>{{item.m1}}</view>
					<view>￥{{item.m3}}</view>
					<view>原价￥{{item.m1}}</view>
				</view>
			</view>
		</view>
		<view class="boxes uniFlex"  v-if="typeIndex == 1">
			<view class="title" style="margin-right: 30upx;">身份证后6位</view>
			<input @keyup="card=card.replace(/[, ]/g,'')" v-model="card" class="input" style="flex: 1;" type="text" placeholder="南方电网必须填写身份证后6位" placeholder-class="pcs">
		</view>
		<view @click="submit" class="nowBtn" hover-class="other-button-hover">立即充值</view>
		
		<view class="boxes">
			<view class="uniBtn">
				<view>充值须知</view>
				<view class="uniFlex">
					<view>已读并同意</view>
					<radio @click="checked=!checked" color="#3AB34A" style="transform:scale(0.7)" :checked="checked" />
				</view>
			</view>
			<view style="color: #D50000;margin: 20upx 0;">请仔细核对充值账号，电费充值成功不支持退款!</view>
			
			<view style="color: #646461;line-height: 180%;">
				<rich-text :nodes="nodes"></rich-text>
			</view>
		</view>
		<!-- 充值方式 -->
		<u-picker :show="show3" ref="uPicker" :columns="columns3" @confirm="confirm3" @cancel="show3=false" closeOnClickOverlay @close="show3=false">
		</u-picker>
		<!-- 户号 -->
		<u-picker :show="show2" :columns="columns2" :defaultIndex="[defaultIndex]" keyName="str" @confirm="confirm2" @cancel="show2=false" closeOnClickOverlay @close="show2=false"></u-picker>
		<!-- 城市 -->
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="show=false" closeOnClickOverlay @close="show=false">
		</u-picker>
	</view>
</template>

<script>
	import commonUtil from "../../utils/format.js";
	export default {
		data() {
			return {
				show: false,
				columns: [
					// ['江苏', '安徽'],
					// ['昆山', '徐州', '南京']
				],
				columnData: [
					// ['昆山', '徐州', '南京'],
					// ['阜阳', '合肥', '宿州', '芜湖']
				],
				address:'',
				province:'',//省
				city:'',//市
				usercode:'',//户号
				
				show2: false,
				columns2:[
					// [
					// 	{title: '安徽阜阳',id: 20211235454,province:'安徽',city:'阜阳',type:2},
					// 	{title: '江苏南京',id: 20211235455,province:'江苏',city:'南京',type:1}
					// ],
				],
				defaultIndex:0,
				huhaoid:'',
				
				typeList:[
					{id:1,name:'国家电网'},
					{id:2,name:'南方电网'}
				],
				typeIndex:0,//运营商类型索引
				
				gw:[],//国网
				nw:[],//南网
				itemIndex:'',
				itemId:'',
				checked:true,
				nodes:'',
				
				card:'',//身份证后六位
				
				show3:false,
				columns3:[
					['微信支付', '余额支付'],
				],
			}
		},
		onLoad() {
			// uni.setStorageSync('tokenUid',1);
			this.getcitys();
			this.getindexmsg();
			if(uni.getStorageSync("tokenUid")){
				this.houseidList()
			}
			
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.show = false;
				this.province = e.value[0];
				this.city = e.value[1];
				this.address = e.value[0] + '-' + e.value[1];
				this.huhaoid = '';
				this.usercode = '';
				// console.log('confirm', e)
				// console.log('confirm', e.value)
			},
			// 获取户号信息
			async houseidList(){
				let res = await this.$api.gethuhao({uid:uni.getStorageSync("tokenUid")});
				if(res.code == 200){
					if(res.data.length>0){
						// 获取默认户号
						let itemList = res.data;
						for(let i=0;i<itemList.length;i++){
							if(itemList[i].default == 1){
								this.defaultIndex = i;
							}
						}
						this.columns2.push(itemList)
					}
					// console.log(res)
				}
			},
			// 获取城市信息
			async getcitys(){
				let res = await this.$api.getcity();
				if(res.code == 200){
					// console.log(res)
					this.columns = res.data.c1;
					this.columnData = res.data.c2;
				}
			},
			// 获取电网信息
			async getindexmsg(){
				let res = await this.$api.getindex();
				if(res.code == 200){
					// console.log(res)
					this.nodes = commonUtil.text(res.data.msg);
					this.gw = res.data.gw;
					this.nw = res.data.nw;
				}
			},
			
			// 充值历史
			confirm2(e){
				this.show2 = false;
				// console.log(e)
				// console.log(e.indexs)
				console.log(e.value[0])
				if(e.value[0]){
					this.address = e.value[0].city + '-' + e.value[0].area;
					this.province =  e.value[0].city;
					this.city =  e.value[0].area;
					this.huhaoid =  e.value[0].id;
					this.usercode =  e.value[0].number;
				}
			},
			// 支付方式
			confirm3(e){
				this.show3 = false;
				if(e.value[0] == '微信支付'){
					this.setMsg(0)
				}else if(e.value[0] == '余额支付'){
					this.setMsg(1)
				}
			},
			// 提醒
			setMsg(num){
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否确认给户号'+this.usercode+'充值',
					cancelColor: '#B3B3B3',
					confirmText: '确定充值',
					confirmColor: '#FC6CA7',
					success: function(res) {
						if (res.confirm) {
							if(num==0){
								that.payWeChat()
							}else if(num==1){
								that.payMoney()
							}
						} else if (res.cancel) {
							
						}
					}
				});
			},
			// 微信支付
			async payWeChat(){
				let params = {};
				if(this.huhaoid){
					params = {
						uid:uni.getStorageSync("tokenUid"),
						id:this.itemId,
						huhaoid:this.huhaoid,
						openid:uni.getStorageSync("openid"),
					}
				}else{
					params = {
						uid:uni.getStorageSync("tokenUid"),
						id:this.itemId,
						huhaoid:this.huhaoid,
						openid:uni.getStorageSync("openid"),
						type:this.typeIndex,//0国  1南
						youhui:0,
						city:this.province,
						area:this.city,
						number:this.usercode,
						card:this.card,
					}
				}
				let res = await this.$api.jspay(params);
				if(res.code == 200){
					// console.log(res)
					let payment = res.data;
					uni.requestPayment({
						...payment,
						success(res) {
							uni.showToast({
								title:'充值成功'
							})
							setTimeout(function(){
								uni.reLaunch({
									url: '/pages/order/order?active=1'
								})
							},1000)
						},
						fail(err) {
							console.error('pay fail', err)
							uni.showToast({
								title: "支付失败",
								icon: "none"
							})
						}
					})
				}
			},
			// 余额支付
			async payMoney(){
				let params = {};
				if(this.huhaoid){
					params = {
						uid:uni.getStorageSync("tokenUid"),
						id:this.itemId,
						huhaoid:this.huhaoid,
						openid:uni.getStorageSync("openid"),
					}
				}else{
					params = {
						uid:uni.getStorageSync("tokenUid"),
						id:this.itemId,
						huhaoid:this.huhaoid,
						openid:uni.getStorageSync("openid"),
						type:this.typeIndex,//0国  1南
						youhui:0,
						city:this.province,
						area:this.city,
						number:this.usercode,
						card:this.card,
					}
				}
				let res = await this.$api.yuepay(params);
				if(res.code == 200){
					// console.log(res)
					uni.showToast({
						title:'充值成功'
					})
					setTimeout(function(){
						uni.navigateTo({
							url: '/pages/order/order?active=1'
						})
					},1000)
				}
			},
			
			// 切换运营商
			tabType(index){
				this.typeIndex = index;
				this.itemIndex = '';
				this.itemId = '';
			},
			// 切换充值
			tabItem(index,id){
				this.itemIndex = index;
				this.itemId = id;
			},
			// 登录
			Login() {
				uni.showModal({
					title: '温馨提示',
					content: '您还未登录，请登录后操作！',
					cancelColor: '#B3B3B3',
					confirmText: '去登录',
					confirmColor: '#FC6CA7',
					success: function(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
			
						}
					}
				});
			},
			// 立即充值
			submit(){
				if(!uni.getStorageSync("tokenUid")){
					this.Login()
					return
				}
				if(!this.province || !this.city){
					uni.showToast({
						title:'请选择地区',
						icon:'none'
					})
					return
				}
				if(!this.usercode){
					uni.showToast({
						title:'请输入户号',
						icon:'none'
					})
					return
				}
				if(!this.itemId){
					uni.showToast({
						title:'请选择充值类型',
						icon:'none'
					})
					return
				}
				if(this.typeIndex == 1){
					if(!this.card){
						uni.showToast({
							title:'南方电网必须填写身份证后六位才能充值',
							icon:'none',
							duration:1500
						})
						return
					}
				}
				this.show3 = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.nowBtn{
		background: #FC6CA7;
		text-align: center;
		width: 710upx;
		margin: 10upx auto;
		color: #fff;
		border-radius: 10upx;
		padding: 20upx 0;
	}
	.boxes{
		background: #fff;
		margin: 20upx;
		padding: 20upx;
		font-size: 30upx;
		
		.title{
			font-weight: bold;
			color: #000;
		}
		.box{
			width: 184upx;
			height: 88upx;
			line-height: 88upx;
			margin-top: 22upx;
			border: 1px solid #9F9F9F;
			border-radius: 10upx;
			color: #A0A0A0;
			background: #E5E5E5;
			margin-right: 37upx;
			text-align: center;
		}
		.box2{
			color: #EA4778;
			border: 1px solid #E84A7D;
			background: #FEF0F2;
		}
		
		.bottomcontent{
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			
			.boxitem{
				background: url('@/static/img/a2.png') no-repeat;
				background-size: 100% 100%;
				width: 215upx;
				height: 198upx;
				margin-right: 12upx;
				margin-top: 15upx;
				text-align: center;
				position: relative;
				border-radius: 15upx;
				
				&:nth-child(3n){
					margin-right: 0upx;
				}
				
				view{
					&:nth-child(1){
						text-align: left;
						font-size: 28upx;
						color: #fff;
						padding-left: 6upx;
					}
					&:nth-child(2){
						font-size: 32upx;
						margin: 10upx 0;
					}
					&:nth-child(3){
						font-size: 34upx;
						font-weight: bold;
					}
					&:nth-child(4){
						font-size: 28upx;
						text-decoration:line-through;
						color: #696969;
					}
				}
			}
			.boxitem2{
				background: #FC6CA7;
				view{
					color: #fff;
					
					&:nth-child(4){
						color: #fff;
					}
				}
			}
		}
	}
	.cont-top {
		background: #fff;
		margin: 20upx;
		padding: 34upx 30upx;
		
		.box{
			text-align: center;
			margin: 0 0 30upx 30upx;
			font-size: 30upx;
			
			.title{
				font-weight: bold;
			}
			.btn{
				font-size: 24upx;
				color: #D4504E;
				border: 1px solid #D4504E;
				padding: 6upx 20upx;
				border-radius: 5upx;
			}
			.btn2{
				color: #fff;
				border: 1px solid #fff;
			}
			input{
				flex: 1;
				border-bottom: 1px solid #F3F3F3;
				padding-bottom: 12upx;
				margin: 0 22upx;
			}
			.pcs{
				font-size: 30upx;
			}
		}
		.uniFlex{
			color: #EA4778;
			font-size: 30upx;
			image{
				width: 26upx;
				height: 26upx;
				margin-right: 5upx;
			}
		}
	}

	
</style>
